<template>
    <div class="HomeCom">
        <h1>JavaScript考试系统</h1>
        <img class="photo" :src="user.photo" alt="头像">
        <h1>考生：{{user.name}}</h1>
        <div class="button" @click="startExam">开始考试</div>
    </div>
</template>

<script>
    export default {
        props: {
            user: {
                type: Object,
                default() {
                    return {}
                }
            }
        },
        methods: {
            startExam() {
                this.$emit("updateCom", "ResultCom")
            }
        }
    }
</script>

<style scoped lang="less">
    .HomeCom {
        text-align: center;
        h1 {
            font-size: 1.5em;
            font-family: Arial, Helvetica, sans-serif;
            margin-top: 15%;
        }
        .photo {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin-top: 20%;
        }
        .button {
            width: 50%;
            height: 50px;
            line-height: 50px;
            margin-top: 20%
        }
    }
</style>